<!--
 * @Author: dzj
 * @Date: 2021-11-15 22:38:16
 * @Description: 
-->
<template>
  <div class="home">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <search :input1="input" :typeGroup1="typeGroup" :value1="value"></search>
    <!-- <detail></detail> -->
  </div>
  <div id="zxyIntroduction">
    <div  id="zxyRowA">
    <el-row>
        <el-col :span="4" :offset="2">
          <h2 style="text-align: center;color:white;">学位论文</h2>
          <div style="color:white;line-height:25px;font-size: 14px;">学位论文资源主要包括中英文学位论文，论文收录始于1978年，涵盖基础科学、理学、工业技术、人文科学、社会科学、医药卫生、农业科学、交通运输、航空航天、环境科学等各学科领域；文献收录来源为经批准可以授予学位的高等学校或科学研究机构。</div>
        </el-col>
        <el-col :span="4" :offset="4">
          <h2 style="text-align: center;;color:white;">会议论文</h2>
          <div style="color:white;line-height:25px;font-size: 14px;">会议资源包括中文会议和英文会议，中文会议收录始于1982年；外文会议主要来源于Springer Link外文文献数据库，包括了各类期刊、丛书、论文。</div>
        </el-col>
        <el-col :span="4" :offset="4">
          <h2 style="text-align: center;;color:white;">专利</h2>
          <div style="color:white;line-height:25px;font-size: 14px;">专利资源来源于中外专利数据库，收录始于1985年。收录范围涉及十一国两组织，最早可追溯到十八世纪八十年代。</div>
        </el-col>
  </el-row>
      </div>
  </div>
  <div v-loading="loading" class="well">
        <div style="font-size: 18px;font-weight: 700;text-align: center;line-height:100px;">热点|Hotpot</div>
        <el-row>
          <el-col :span="7" :offset="3">
            <el-card>
              <div style="font-size: 17px;line-height:30px;font-weight: 700;">热门学科</div>
              <div>
                <el-table :data="subject" stripe style="width: 100%" :cell-style="cellStyle">
                    <el-table-column prop="id"  width="180" />
                    <el-table-column prop="name" width="180" />
                </el-table>
              </div>
            </el-card>
          </el-col>
          <el-col :span="9" :offset="2">
            <el-card>
              <div style="font-size: 17px;line-height:30px;font-weight: 700;">热门文献</div>
              <div v-for="(item,index) in ach" :key="index" style="margin-top:25px;margin-bottom:25px;">
                <el-link :underline="false" @click="gotoliterature(item.id)" :icon="this.Document">{{item.name}}</el-link>
              </div>
              <!-- <el-table :data="ach" stripe style="width: 100%" @row-click="gotoliterature">
                    <el-table-column prop="name" />
                </el-table> -->
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div style="font-size: 18px;font-weight: 700;text-align: center;line-height:50px;">排名|Rank</div>
            <div id="zxyChartA"></div>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'
import * as echarts from 'echarts'
import Search from '@/views/Search.vue'
import axios from "axios";
import {Document} from "@element-plus/icons";
//import qs from 'qs';
// import Detail from './Detail.vue'

export default defineComponent({
  name: 'Home',
  components: {
    //HelloWorld
     Search,
     // eslint-disable-next-line vue/no-unused-components
     Document
    // Detail
  },
  setup() {
    const state = reactive({
      loading: true,
       input:"",
      typeGroup:[],
      value:"",
      subject_name:[],
      subject:[],
      aca_ach_name:[],
      aca_ach_id:[],
      ach:[],
      //institution_name:["test233","0","","","_wtest","\\2\\@@@@@*ed"],
      institution_name:[],
      institution_influence:[],
    })
    return toRefs(state)
  },
  methods:{
    cellStyle({rowIndex,columnIndex}){
      //alert(rowIndex,columnIndex)
      if(rowIndex==0&&columnIndex==0){
        return 'color: #ff0000;font-weight: 700;'
      }
      if(rowIndex==1&&columnIndex==0){
        return 'color: #ff7f00;font-weight: 700;'
      }
      if(rowIndex==2&&columnIndex==0){
        return 'color: #dbdb70;font-weight: 700;'
      }
    },
    formatSubject(){
      var j
      for(j = 0; j < this.subject_name.length; j++) {
        var aSubject={}
        aSubject["id"]=j+1
        aSubject["name"]=this.subject_name[j]
        this.subject.push(aSubject)
      } 
      this.loading=false
    },
    formatAch(){
      var j
      for(j = 0; j < this.aca_ach_name.length; j++) {
        var anAch={}
        anAch["name"]=this.aca_ach_name[j]
        anAch["id"]=this.aca_ach_id[j]
        this.ach.push(anAch)
      } 
      this.loading=false
    },
    gotoliterature(a){
      //console.log(qs.stringify(row))
      //var a=row.id
      //此处添加文献跳转路由
      localStorage.setItem("id", a);
      this.$router.push({
        name: "Detail",
        params: {
           id: a,
         },
       });
    },
    initChartA(){
      let myChart = echarts.init(document.getElementById('zxyChartA'));
      let option = {
        color: ['#f44'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          }
        },
        grid: {
  left: "40",
  containLabel: true
},

        yAxis : [
          {
            type : 'category',
            data : this.institution_name,
            offset:50 ,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              interval:0
            }
          }
        ],
        xAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'影响力',
            type:'bar',
            barWidth: '60%',
            data:this.institution_influence,
            itemStyle:{
              normal:{
                color:"#5087ec"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize',function() {myChart.resize()});
    }
  },

   mounted() {
    },
    created(){
      axios.post("home/").then((res) => {
          console.log(res.data);
          if(res.data.code==0){
            this.subject_name=res.data.subject_name;
            this.aca_ach_name=res.data.aca_ach_name;
            this.aca_ach_id=res.data.aca_ach_id;
            this.formatSubject();
            this.formatAch();
            this.institution_name=res.data.institution_name;
            this.institution_influence=res.data.institution_influence;
            this.initChartA();
          }

      });
    }
})
</script>

<style scoped>

#zxyIntroduction{
  background: url("../assets/1.png");
  width: 100%;
}

#zxyRowA{
  padding-top:25px;
  padding-bottom:90px;
}

#zxyChartA{
  width: 50%;
  height: 500px;
  border: 1px solid rgb(255, 255, 255);
  margin: 0 auto;
}
</style>
